import SingleSelection from "../component/SingleSelection/SingleSelection";

require('./PageDoVote.less');

import React from "react";
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Store from './Store';
import Actions from './Actions';

import {
  ActivityIndicator,
  Button,
  Card, DatePicker, Flex, Icon, InputItem, List, NavBar, Pagination, Result, Switch, TabBar, Tabs, TextareaItem,
  WhiteSpace,
  WingBlank
} from "antd-mobile";

const Item = List.Item;

import QuestionnaireIcon from '../rs/questionnaire.png';
import MultiSelection from "../component/MultiSelection/MultiSelection";

class DoVote extends React.Component {
  constructor(props) {
    super(props);
    this.onAnswerChange = this.onAnswerChange.bind(this);
  }

  componentWillMount() {
    Actions.customInit(this.props.params.subjectId);
  }

  onAnswerChange(options, questionId) {
    Actions.onAnswerChange(options, questionId);
  }

  submit() {
    Actions.submitAnswer();
  }

  render() {
    let questionnaire = this.state.do.questionnaire;
    let t = this;
    let content = t.state.do.isLoading ?
      <div className="loading-example">
        <div className="align">
          <ActivityIndicator
            toast
            text="加载中..."
            animating={t.state.do.isLoading}
          />
        </div>
      </div>
      :
      <div>
        <div style={{textAlign: 'center', backgroundColor: '#fff', padding: '10px'}}>
          <h2 style={{margin: 0}}>{questionnaire.title}</h2>
        </div>
        <WhiteSpace/>
        <div style={{backgroundColor: '#fff', padding: '10px 30px'}}>
          <p style={{margin: '2px 0'}}>调查说明：{questionnaire.description}</p>
        </div>
        {
          questionnaire.status === '已结束' ?
            <div>
              调查已结束
            </div>
            :
            <div>
              <WhiteSpace/>
              <div style={{backgroundColor: '#fff', padding: '10px 30px', textAlign: 'right'}}>
                <p style={{margin: '2px 0', color: '#564561'}}>调查截止时间：{questionnaire.endTime}</p>
              </div>
            </div>
        }
        {
          t.state.do.isVoteCountLoading ?
            null
            :
            <div>
              <WhiteSpace/>
              <div style={{backgroundColor: '#fff', padding: '10px 30px', textAlign: 'right'}}>
                <p style={{margin: '2px 0'}}>{"已有"+t.state.do.result.voteCount+"人参与调查"}</p>
              </div>
            </div>
        }
        {
          questionnaire.questions && questionnaire.questions.length > 0 && questionnaire.questions.map((q, index) => {
            if (q.type === 'Single') {
              return (
                <SingleSelection
                  index={index+1}
                  questionTitle={q.title}
                  questionId={q.id}
                  editable={questionnaire.isVoted}
                  totalVoteCount={t.state.do.result.voteCount}
                  options={q.options}
                  onChange={this.onAnswerChange}
                />
              );
            } else if (q.type === 'Multi') {
              return (
                <MultiSelection
                  index={index+1}
                  questionTitle={q.title}
                  questionId={q.id}
                  editable={questionnaire.isVoted}
                  totalVoteCount={t.state.do.result.voteCount}
                  options={q.options}
                  onChange={this.onAnswerChange}
                />
              );
            }
          })
        }
        <WhiteSpace />
        {
          questionnaire.isVoted ?
            <Result
              title="您已完成问卷调查"
              message="感谢您的参与"
            />
            :
            <WingBlank>
              <div>
                <Button type="primary" onClick={() => this.submit()}>提交问卷</Button><WhiteSpace />
              </div>
            </WingBlank>
        }
      </div>;

    return (content);
  }
}

ReactMixin.onClass(DoVote, Reflux.connect(Store, 'do'));

export default DoVote;
